<!-- 组件的结构 -->
<template>
    <div class="demo">
        <h2>学生名称：{{name}}</h2>
        <h2>学生年龄：{{age}}</h2>
        <h2>求和:{{number}}</h2>
        <button @click="add">点我累加</button>
        <button @click="sentStudentName">把学生名字传给App</button>
        <button @click="onbind">解绑atguigu事件</button>
        <button @click="death">销毁当前student组件的实例</button>
	</div>
</template>
<!-- 组件交互相关的代码（数据，方法） -->
<script>
// 直接暴露组件的配置对象，提供外部引用
export default {
    name:'Student',
    data(){
        return{
            name:'张三',
            age:19,
            number:0
        }
        
    },
    methods:{
        add(){
          console.log('add回调被调用了');  
          this.number++
        },
        sentStudentName(){
            //触发student组件实例身上的atguigu事件
            this.$emit('atguigu',this.name)  //$emit触发自定义事件
            this.$emit('demo',this.name)
        },
        onbind(){   
            this.$off('atguigu'); //适用于解绑一个自定义事件
            // this.$off(['atguigu','demo']); //适用于解绑一个自定义事件
            // this.$off();//所有自定义事件都被解绑
        },
        death(){
            this.$destroy();//销毁了当前的student组件实例，销毁后所有绑在student身上的自定义事件全部失效了
        }
    }
}
</script>
<!-- 组件的样式 -->
<style scoped>
    .demo{
        background-color: gray;
    }
</style>